<template>
  <div class="x-meun">
    <div class="slot">
      <slot></slot>
    </div>

    <div v-show="show">
      <div class="mask" ref="mask" :style="style"></div>
      <div class="slider" ref="slider" :style="style"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'x-meun',
    props: ['value'],
    data() {
      return {
        labelList: [],
      }
    },
    computed: {
      show() {
        return this.labelList.some(item => item === this.value)
      },
      style() {
        const opacity = this.value ? 1 : 0
        const transionY = this.labelList.indexOf(this.value) * 48
        return {
          opacity,
          transform: `translateY(${transionY}px)`,
        }
      },
    },
    methods: {
      changeActiveLabel(label) {
        this.$emit('input', label)
      },
    },
    mounted() {
      this.$children.forEach(child => this.labelList.push(child.label))
    },
  }
</script>

<style lang="scss" scoped>
  .x-meun {
    position: relative;
    .slot {
      z-index: 2;
      position: relative;
    }
    .slider {
      z-index: 1;
      width: 200px;
      height: 44px;
      top: 0;
      left: 0;
      position: absolute;
      background-color: transparent;
      border-right: 2px solid rgba(63, 140, 255, 1);
      transition: all 0.3s ease;

      &.active {
        border-right: 2px solid rgba(63, 140, 255, 1);
      }
    }
    .mask {
      z-index: 1;
      position: absolute;
      top: 0px;
      left: 15px;
      width: 172px;
      height: 44px;
      border-radius: 10px;
      background-color: #ebf3ff;
      transition: all 0.3s ease;
    }
  }
</style>
